import React, { Component } from "react";
import { Modal, Toast } from "antd-mobile";
import { connect } from "react-redux";
import MainLayout from "@/component/mainLayout/mainLayout";
import { InterfaceG } from "@/config/Config";
import CouponItem from "./couponItem";
import Panel from "./panel";
import yhTools from "@/tools/yh";
import "./index.scss";
const logo = require("@/images/imageXHB/newPersonCoupon/logo@2x.png");
const callPhoneData = {
	telphone: "4006906663"
};
class NewPersonCoupon extends Component {
	constructor(props) {
		super(props);
		this.state = {
			serviceVisible: false,
			data: {}
		};
	}

	componentDidMount() {
		this.queryCouponMission();
	}

	/**查询领券任务 */
	queryCouponMission = async () => {
		let objs = {
			url: InterfaceG.queryCouponMission,
			params: {},
			_alertShow: false
		};
		try {
			let result = await yhTools.request(objs);
			if (result.code === "0") {
				this.setState({
					data: result.data
				});
			}
		} catch (error) {
			console.log(error);
		}
	};

	//打开客服modal
	openService = () => {
		this.setState({
			serviceVisible: !this.state.serviceVisible
		});
	};

	//打电话
	call = async () => {
		try {
			await yhTools.callPhone(callPhoneData);
		} catch (error) {
			Toast.info(error);
		} finally {
			this.openService();
		}
	};
	onClick = () => {
		this.props.history.push("/paymentDiscount/coupon");
	};
	goRule = () => {
		const { other } = this.props.newPersonCoupon;
		this.props.history.push({
			pathname: "/newPersonCouponRule",
			state: { text: other }
		});
	};
	render() {
		const _pageParams = {
			header: {
				title: "优惠券领取"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const { serviceVisible } = this.state;
		const {
			xhbCoupons = [],
			totalCouponValue,
			draw
		} = this.props.newPersonCoupon;
		console.log(this.props.newPersonCoupon, "-------------");
		const title = draw ? "恭喜您获得" : "您已经领取过优惠券啦～";
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="new-person-coupon">
					<div className="new-person-coupon-logo">
						<div className="logo">
							<img src={logo} alt="永辉金融" />
						</div>
						<div className="service" onClick={this.openService}>
							<a style={{ padding: 5 }} onClick={this.goRule}>
								规则
							</a>
							|
							<a style={{ padding: 5 }} onClick={this.openService}>
								客服
							</a>
						</div>
					</div>
					<span className="new-person-coupon-text">
						领{totalCouponValue}元小辉付券包
					</span>
					<div className="new-person-coupon-panel">
						<Panel title={title}>
							{xhbCoupons.map(item => (
								<CouponItem key={item.activityCouponNo} data={item} />
							))}
						</Panel>
						<a className="coupon-button" onClick={this.onClick}>
							查看优惠券
						</a>
					</div>
				</div>
				<Modal
					style={{ overflow: "hidden" }}
					visible={serviceVisible}
					transparent
					footer={[
						{
							text: "取消",
							onPress: this.openService
						},
						{
							text: "呼叫",
							onPress: () => this.call("4008219666")
						}
					]}
				>
					<div className="modal-content-text">400 690 6663</div>
				</Modal>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return {
		newPersonCoupon: state.newPersonCouponReducer || {}
	};
}

export default connect(mapStateToProps, null)(NewPersonCoupon);
